
<template>
	<div class="statistic">
    <van-row class="head">
      <van-col span="8">
        <div class="title">渠道部门</div>
        <div class="value">{{data.saleChnl}}</div>
      </van-col>
      <van-col span="8">
        <div class="title">预估综合达成率</div>
        <div class="big-value">{{data.esSynAchRate}}</div>
      </van-col>
      <van-col span="8">
        <div class="title">综合达成率</div>
        <div class="big-value">{{data.synAchRate}}</div>
      </van-col>
    </van-row>
    <van-row class="content">
      <van-col span="8">
        <div class="title">应收保费(元)</div>
        <div class="value">{{data.ljsPrem}}</div>
      </van-col>
      <van-col span="8">
        <div class="title">应收件数</div>
        <div class="value">{{data.ljsCount}}</div>
      </van-col>
      <van-col span="8">
        <div class="title">预估实收保费</div>
        <div class="value">{{data.esLjaPrem}}</div>
      </van-col>
    </van-row>
    <van-row class="content">
      <van-col span="8">
        <div class="title">实收保费(元)</div>
        <div class="value">{{data.ljaPrem}}</div>
      </van-col>
      <van-col span="8">
        <div class="title">实收件数</div>
        <div class="value">{{data.ljaCount}}</div>
      </van-col>
      <van-col span="8">
        <div class="title">预估实收件数</div>
        <div class="value">{{data.esLjaCount}}</div>
      </van-col>
    </van-row>
    <van-row class="content">
      <van-col span="8">
        <div class="title">保费达成率</div>
        <div class="value">{{data.premAchRate}}</div>
      </van-col>
      <van-col span="8">
        <div class="title">件数达成率</div>
        <div class="value">{{data.countAchRate}}</div>
      </van-col>
      <van-col span="8">
        <div class="title">缴次</div>
        <div class="value">{{data.payCount}}</div>
      </van-col>
    </van-row>


	</div>
</template>

<script setup>
	import { ref, watch } from "vue";
	/**
	 *	modelLabel：父组件选中的label
	 * 	modelValue：父组件选中的code
	 * 	columns:picker数据
	 *	label:选择器的label
	 *	placeholder:选择器的placeholder
	 *	required:是否必录项
	 */
	const props = defineProps({
    pickerType: {
      type: String,
      default: "",
    },
		modelLabel: {
			type: String,
			default: "",
		},
		modelValue: {
			type: String,
			default: "",
		},
		columns: {
			type: Array,
			default: () => [],
		},
		label: {
			type: String,
			default: "",
		},
		placeholder: {
			type: String,
			default: "请选择",
		},
		required: {
			type: Boolean,
			default: false,
		},
		name: {
			type: String,
			default: "",
		},
		checkrule: {
			type: Array,
			default: () => [],
		},
	});
	const emit = defineEmits(["update:modelLabel", "update:modelValue"]);
	const showPicker = ref(false);
	const fieldValue = ref(props.modelLabel);
	const pickerType = ref(props.pickerType);
  const data = {
    rateType:"",

    saleChnl:"个险业务部",// 销售业务部
    esSynAchRate:"96.9%",
    synAchRate:"96.0%",

    ljsPrem:"999999999",// 应收保费
    ljaPrem:"8.70",// 实收保费
    premAchRate:"87.60%",// 保费达成率

    ljsCount:"64.8",// 应收件数
    ljaCount:"64.0",// 实收件数
    countAchRate:"87.00%",// 件数达成率

    esLjaPrem:"87321423.98",// 预估实收保费
    esLjaCount:"64.89",// 预估实收件数
    payCount:"四次及以上",// 缴次
  }
</script>
<style scoped lang="scss">
	.statistic {
    margin: 10px;
    .head{
      padding: 10px;
      //position: absolute;
      //left: 0px;
      //top: 0px;
      //width: 355px;
      height: 80px;
      //border-radius: 8px 8px 0px 0px;
      //opacity: 1;
      /* 辅助色/深蓝色 */
      background: #477FD3;
      .title {
        margin: 10px;
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        display: flex;
        align-items: center;
        letter-spacing: 0em;

        font-variation-settings: "opsz" auto;
        /* 中性色/白色 */
        color: #FFFFFF;
      }
      .value{
        margin: 20px 10px 20px 10px;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        display: flex;
        align-items: center;
        letter-spacing: 0em;

        font-variation-settings: "opsz" auto;
        /* 中性色/白色 */
        color: #FFFFFF;
      }
      .big-value{
        margin: 10px 10px 10px 10px;
        /* 文本/大数字-24-dm */
        font-family: MiSans;
        font-size: 24px;
        font-weight: 600;
        line-height: 36px;
        display: flex;
        align-items: center;
        letter-spacing: 0em;

        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        /* 中性色/白色 */
        color: #FFFFFF;
      }
    }
    .content{
      padding: 10px;
      //position: absolute;
      //left: 0px;
      //top: 80px;
      height: 218/3px;
      //border-radius: 0px 0px 8px 8px;
      //opacity: 1;
      /* 中性色/白色 */
      background: #FFFFFF;
      .title {
        margin: 10px;
        /* 文本/描述12r */
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        display: flex;
        align-items: center;
        letter-spacing: 0em;

        font-variation-settings: "opsz" auto;
        /* 文本色/弱强调 */
        color: #999999;
      }
      .value{
        margin: 10px;
        /* 文本/正文强调数字-16-dm */
        font-family: MiSans;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        display: flex;
        align-items: center;
        letter-spacing: 0em;

        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        /* 文本色/高强调 */
        color: #162032;
      }
    }
  }
</style>
